<!-- -->
<template>
  <div>
    <div
      class="slide-wrap"
      ref="slideWrap"
    >
      <ul
        ref="slideTab"
        class="slide-list"
      >

        <li
          v-for="(value,index) in hotelData"
          :key="index"
          class="slide-item"
        >
          <a :href="value.linkUrl">
            <img
              :src="value.imgUrl"
              alt=""
              v-lazy="value.imgUrl"
            >
            <span class="title">{{value.title}}</span>
            <span class="place">{{value.place}}</span>
            <span
              class="starRatedHotel"
              v-if="value.starRatedHotel"
            >{{value.starRatedHotel}}</span>
            <span
              class="maxArea"
              v-if="value.maxArea"
            >{{value.maxArea}}</span>
          </a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
  data () {
    return {}
  },
  props: {
    hotelData: Array,
    length: Number
  },
  created () {
    this.$nextTick(() => {
      this.slideScroll()
    })
  },
  methods: {
    slideScroll () {
      let width = this.length * 160 + 80
      this.$refs.slideTab.style.width = width + 'px'
      // this.$nextTick 是一个异步函数，为了确保 DOM 已经渲染
      this.$nextTick(() => {
        if (!this.scroll) {
          this.scroll = new BScroll(this.$refs.slideWrap, {
            startX: 0,
            click: true,
            scrollX: true,
            // 忽略竖直方向的滚动
            scrollY: false,
            eventPassthrough: 'vertical'
          })
        } else {
          this.scroll.refresh()
        }
      })
    }
  }

}
</script>
<style lang='stylus' scoped>
@import '~common/stylus/variable';
.slide-wrap {
  .slide-list {
    padding-left: 10px;
    .slide-item {
      display: inline-block;
      height: 100px;
      width: 160px;
      padding: 5px;
      font-size: $font-size-small;
      .title {
        font-size: $font-size-medium-x;
        color: $color-text-t;
      }
      span {
        display: block;
        padding: 5px;
      }
    }
  }
}
</style>
